<template>
  <div class="rank-container">
    <div class="rank-header">
      <img class="rank-image" src="../../static/logo.png" alt="">
      <van-search
          shape="round"
          placeholder="搜索"
          class="rank-search"
      />
      <van-button class="rank-button" round plain color="orange">打开APP</van-button>
    </div>
    <div class="rank-tab">

      <van-tabs v-model:active="active">
        <van-tab :name="item.id" :title="item.name" v-for="item in tabLists" :key="item.id" ></van-tab>
      </van-tabs>
    </div>
    <div class="rank-content">
      <div class="content-left">
        <ul>
          <li v-for="item in tabWraps" :key="item.id"
              :class="{ isActive: item.id === selectedItem }"
              @click="selectItem(item.id)"
              >{{ item.name }}</li>
        </ul>

      </div>
      <!-- 右侧内容 -->
      <div class="rank-right">
        <div class="container">
          <div class="album-wrapper">
            <div class="album-icons">
              1
            </div>
            <img class="album-image" src="//imagev2.xmcdn.com/storages/5a86-audiofreehighqps/D8/E5/GKwRIJEFfkl9AAOIigD9zcBJ.png!op_type=3&amp;columns=144&amp;rows=144&amp;magick=webp">

          </div>
          <div class="album-details">
            <h3 class="album-title">郭德纲21年相声精选&nbsp;</h3>
            <p class="album-rating">专辑评分9.5分</p>
            <div class="album-stats">
              <div class="play">
                <div class="play_human">
                  <van-icon name="fire" />35
                </div>

                <div class="play_num">
                  <van-icon name="audio" />1388
                </div>
              </div>

            </div>
          </div>
        </div>
        <div class="container">
          <div class="album-wrapper">
            <div class="album-icons">
              1
            </div>
            <img class="album-image" src="//imagev2.xmcdn.com/storages/5a86-audiofreehighqps/D8/E5/GKwRIJEFfkl9AAOIigD9zcBJ.png!op_type=3&amp;columns=144&amp;rows=144&amp;magick=webp">

          </div>
          <div class="album-details">
            <h3 class="album-title">郭德纲21年相声精选&nbsp;</h3>
            <p class="album-rating">专辑评分9.5分</p>
            <div class="album-stats">
              <div class="play">
                <div class="play_human">
                  <van-icon name="fire" />35
                </div>

                <div class="play_num">
                  <van-icon name="audio" />1388
                </div>
              </div>

            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";
import rankCategory from "@/api/rank.ts"
import reminder from "@/utils/reminder.ts";
import {TabList,TabWrap} from "@/type/resType/rankResType.ts";
const tabLists  = ref<TabList[]>([]);
const tabWraps = ref<TabWrap[]>([]);
const active = ref<number>(0); // 定义一级分类
const twoActive = ref<number>()//定义二级分类


watch(active,(newVal:any)=>{
  const item:any = tabLists.value.find(item => item.id===newVal)
  tabWraps.value = item.tabWraps;
})

watch([tabWraps, twoActive], ([newTabWraps, newTwoActive]: [TabWrap[], number]) => {
  newTabWraps.forEach((tabWrap: TabWrap) => {
    // 获取选中的TabWrap对象
    const selectedTabWrap = tabWrap[newTwoActive];
    console.log(selectedTabWrap)
    //getShowList();
  });
});

// 获取列表数据
async function getCategory1and2(){
  try {
    let result = await rankCategory.getCategory1and2()
    tabLists.value = result.data.tabLists
  }catch (error:any){
    reminder(error || "获取数据失败");
  }
}
const selectedItem = ref(0);
const selectItem = (id:number)=>{
  selectedItem.value = id
  twoActive.value = id
}


async  function getShowList(id:number){
  try {
    let result = await rankCategory.getShowList(id)
    console.log(result)
  }catch(error:any){
    reminder(error || "获取数据失败");
  }
}

onMounted(()=>{
  getCategory1and2()
})
</script>

<script lang="ts">
export default {
  name: "rank-page",
};
</script>

<style scoped lang="less">
.rank-container{
  background: #fff;
  width: 100%;
  height: 100%;
  .rank-header {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 15px 15px 5px;
    .rank-image {
      width: 70px;
      height: 15px;
      margin-right: 10px;
      margin-left: 10px;
    }

    .rank-search {
      width: auto;
      height: 30px;
      font-size: 12px;
    }

    .rank-button {
      width: 68px;
      height: 30px;
      font-size: 12px;
      text-align: center;
      white-space: nowrap;

    }
  }
  .rank-content {
    display: flex;
    .content-left {
      width: 74px;
      overflow-y: auto;
      height: 100%;

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        height: 100%;
        background: rgb(243, 244, 245);
        li {
          color: #72727b;
          height: 51px;
          cursor: pointer;
          font-size: 14px;
          line-height: 51px;
          text-align: center;
          border-bottom: 1px solid #dadee2;

          &.isActive {
            background: white;
            &:before {
              position: absolute;
              left: 0;
              content: '';
              width: 5px;
              height: 51px;
              background: red;
            }
          }
        }
      }
    }
    .content-right {
      width: auto;

    }
    .container {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      border-bottom: 1px solid #dadee2;
    }

    .album-wrapper {
      display: flex;
      align-items: center;
      margin-right: 10px;
    }

    .album-image {
      width: 70px;
      height: 70px;
    }

    .album-icons {
      width: 34px;
      text-align: center;



    }

    .icon {
      width: 20px;
      height: 20px;
      background-color: #ccc;
      margin-right: 5px;
    }

    .album-details {
      flex: 1;
      font-size: 14px;
    }

    .album-title {
      color: #40404c;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      margin-bottom: 5px;
      font-size: 18px;

    }

    .album-rating {
      color: #999;
      margin-bottom: 5px;

    }

    .album-stats {
      display: flex;
    }

    .stat {
      margin-right: 10px;
    }

    .stat-icon {
      width: 16px;
      height: 16px;
      background-color: #ccc;
      margin-right: 5px;
    }
    .play{
      display: flex;
      margin-top: 10px;
      .play_num{
        margin-left: 30px;
      }
    }

  }

}
</style>